<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>处理组件的边界情况</title>
</head>

<body>
  <div>
    <p>$root (通过这个可以访问vue的根实例)</p>
    <p>$parent / $children (用来获取父组件和子组件成员)</p>
    <p>$refs (访问子组件)</p>
    <p>依赖注入 provide / inject ----inject中的成员一定是provide中提供的(inject注入的成员不允许修改)</p>
  </div>
  <script>
    // 例如这是parent 文件 父
    provide() {
      return {
        title: 1,
        handle: 2
      }
    }

    // 这是child 子组件 (通过inject注入)
    inject: ['title', 'handle']

    // 这是child 子组件 中的子组件 (通过inject注入)
    inject: ['title', 'handle']
  </script>
</body>

</html>